<template>
  <div id="login_register">
    <img class="bg" :src="bg" alt="">
    <img :src="logo" style="width: 90px;margin-top: 60px" alt="">
    <p style="color: white;font-size: 30px">欢迎来到！</p>
    <span style="font-size: 30px;color: white">JI DONG MUSIC
      <span style="font-size: 20px;color: red">悸动音乐</span> </span>
    <van-form style="opacity: 0.8;margin-top: 50px">
      <van-cell-group inset style="width: 92%">
        <van-field
            v-model="user.account"
            name="账号"
            label="账号"
            placeholder="账号"
            :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
            v-model="user.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-show="!isShow"
            v-model="user.name"
            name="个性签名"
            label="个性签名"
            placeholder="个性签名"
            :rules="[{ required: true, message: '请填写个性签名' }]"
        />
        <van-field
            v-show="!isShow"
            name="radio"
            label="性别">
          <template #input>
            <van-radio-group v-model="user.sex" direction="horizontal">
              <van-radio name="男">男</van-radio>
              <van-radio name="女">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-model="user.introduce"
            v-show="!isShow"
            name="介绍"
            label="介绍"
            placeholder="介绍"
            :rules="[{ required: true, message: '请填写介绍' }]"
        />
        <van-field v-show="!isShow" name="radio" label="爱好">
          <template #input>
            <van-radio-group v-model="user.hobby" direction="horizontal">
              <van-radio name="中国风">中国风</van-radio>
              <van-radio name="流行音乐">流行音乐</van-radio>
              <van-radio name="怀旧老歌">怀旧老歌</van-radio>
              <van-radio name="粤语">粤语</van-radio>
              <van-radio name="情歌">情歌</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-cell-group>
      <van-button
          v-show="isShow"
          style="margin-left: 5%;width: 90%;margin-top: 10%"
          round
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="toLogin">
        <span style="font-size: 24px">登录</span>
      </van-button>
      <van-button
          v-show="!isShow"
          style="margin-left: 5%;width: 90%;margin-top: 10%"
          round
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="toRegister">
        <span style="font-size: 24px">注册</span>
      </van-button>
    </van-form>
    <p v-show="isShow" style="color: red" @click="isShow=!isShow">
      忘记密码，立即注册？
    </p>
    <p v-show="!isShow" style="color: red" @click="isShow=!isShow">
      已有账号，立即登录？
    </p>
  </div>

</template>

<script>
import request from "../../utils/request";
// import {dateFormat} from "../../utils/dateFormat";
export default {
  name: "Login",
  data() {
    return {
      user: {
        account: '',
        password: '',
        name: "",
        sex: '男',
        introduce: '',
        hobby: '流行音乐',
        birth:'',
        //注册有默认头像
        photo: require('../../assets/logo.png'),
      },
      bg: require('../../assets/login_register.png'),
      logo: require('../../assets/logo.png'),
      isShow: true,
    }
  },
  methods: {
    toLogin() {
      request.request({
        method: 'post',
        url: '/api/user/login',
        data: this.user
      }).then(res => {
        if (res.data.code == 200) {
          const user = res.data.data.user;
          const token = res.data.data.token;
          localStorage.setItem("user", JSON.stringify(user));
          localStorage.setItem("token", token);
          this.$router.push('/square')
          this.$bus.$emit('isShow_nav', true)
          this.$toast.success(res.data.msg);
        } else {
          this.$toast.fail(res.data.msg);
        }
      })
    },
    toRegister() {
      request.request({
        method: 'post',
        url: '/api/user/register_edit',
        data: this.user
      }).then(res => {
        if (res.data.code == 200) {
          this.$toast.success(res.data.msg);
          this.isShow = true
        } else {
          this.$toast.fail(res.data.msg);
        }
      })
    }
  },
  beforeCreate() {
    this.$bus.$emit('isShow_nav', false)
  }
}
</script>

<style scoped>
#login_register {
  width: 390px;
  height: 844px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.bg {
  position: absolute;
  width: 100%;
  z-index: -999;
}
</style>